Las instalaciones de la AWP del editor de video de Clipchamp registran un crecimiento mensual del 97%

Cómo las AWP, WebAssembly y ChromeOS ayudan a un editor de videos basado en la Web a ofrecer un mejor rendimiento y una experiencia más atractiva a 12 millones de usuarios

Sören Balko
Sören Balko

97%

Aumento mensual en las instalaciones de AWP

2.3x

Mejoras en rendimiento

9%

Mayor retención en los usuarios de la AWP

Clipchamp es el editor de video en línea integrado en el navegador que permite que cualquier persona cuente historias que valga la pena compartir a través de videos. En todo el mundo, más de 12 millones de creadores usan Clipchamp para editar videos fácilmente. Ofrecemos soluciones simples para crear videos, desde herramientas intuitivas, como recortar y cortar, hasta funciones prácticas, como nuestro grabador de pantalla, y hasta un creador de memes.

¿Quién usa Clipchamp?

Nuestros usuarios (o editores cotidianos, como los llamamos) son diversos. No se necesita experiencia para ser editor de videos con Clipchamp. Específicamente, en la actualidad, notamos que los equipos de ventas, capacitación de asistencia y marketing de productos usan nuestra cámara web y grabadora de pantalla para crear contenido explicativo rápido con texto y GIFs agregados para hacerlo atractivo. También observamos que muchas pequeñas empresas editan y publican videos en redes sociales mientras están en movimiento.

¿A qué desafíos se enfrentan?

Sabemos que la edición de videos puede ser intimidante al principio. Se supone que es difícil, probablemente debido a experiencias frustrantes anteriores con software de edición complejo. En cambio, Clipchamp se enfoca en la facilidad y la simplicidad, y brinda asistencia con superposiciones de texto, videos y música de archivo, plantillas y mucho más.

La mayoría de los editores comunes no quieren crear obras maestras de cine. Hablamos mucho con nuestros usuarios y, constantemente, nos recuerdan que están ocupados y solo quieren contar su historia al mundo lo más rápido y fácil posible, por lo que este es un aspecto en el que nos enfocamos.

Cómo desarrollar una AWP de Clipchamp

En Clipchamp, nos esforzamos por empoderar a las personas para que cuenten sus historias a través de los videos. Para cumplir con esta visión, pronto nos dimos cuenta de que es importante permitir que nuestros usuarios usen su propio material de archivo cuando armen un proyecto de video.

Esa estadística presionó al equipo de ingeniería de Clipchamp para que creara una tecnología que pudiera procesar de manera eficiente archivos multimedia a gran escala en una aplicación web. Teniendo en cuenta las limitaciones de ancho de banda de la red, descartamos rápidamente una solución tradicional basada en la nube. Subir archivos multimedia grandes desde una conexión a Internet minorista siempre generaría tiempos de espera enormes antes de que se pudiera comenzar a editar, lo que, en definitiva, generaría una experiencia del usuario deficiente.

Eso nos llevó a cambiar a una solución completamente integrada en el navegador, en la que todo el "trabajo pesado" del procesamiento de video se realiza de forma local con los recursos de hardware disponibles en el dispositivo del usuario final. Apostamos estratégicamente por el navegador Chrome y, por extensión, por la plataforma de ChromeOS para ayudarnos a superar los desafíos inevitables de crear una plataforma de creación de videos en el navegador.

El procesamiento de video requiere muchos recursos, lo que afecta a los recursos de la computadora y del almacenamiento. Comenzamos a compilar la primera versión de Clipchamp sobre el cliente nativo (portátil) (PNaCl) de Google. Si bien, con el tiempo, se eliminó gradualmente, PNaCl fue una gran confirmación para nuestro equipo de que las apps web pueden ser rápidas y de baja latencia, mientras se ejecutan en el hardware del usuario final.

Cuando más tarde cambiamos a WebAssembly, nos alegramos de ver que Chrome se apoderó de la incorporación de funciones posteriores al MVP, como las operaciones de memoria masiva, los subprocesos y, más recientemente, las operaciones de vectores de ancho fijo. Nuestro equipo de ingeniería anticipó con entusiasmo esta última función, lo que nos permite optimizar nuestra pila de procesamiento de video para aprovechar las operaciones SIMD, que son frecuentes en las CPU contemporáneas. Aprovechando la compatibilidad de Chrome con SIMD de WebAssembly, pudimos acelerar algunas cargas de trabajo particularmente exigentes, como la decodificación y codificación de video 4K.

Rendimiento del codificador (1080p, 8.33 s a 30 fps) Configuración predeterminada sin SIMD: 25 segundos Configuración predeterminada con SIMD: ~13 segundos Configuración predeterminada de compresión sin SIMD: ~83 segundos Ajuste predeterminado de compresión con SIMD: ~33 segundos Configuración predeterminada de calidad (nueva) sin SIMD: ~75 segundos Configuración predeterminada de calidad con SIMD: ~30 segundos

Con poca experiencia previa y en menos de un mes de esfuerzo por parte de uno de nuestros ingenieros, logramos mejorar el rendimiento en 2.3 veces. Si bien aún se limita a una prueba de origen de Chrome, ya pudimos lanzar estas mejoras de SIMD a la mayoría de nuestros usuarios. Si bien nuestros usuarios ejecutan configuraciones de hardware muy diferentes, pudimos confirmar un aumento de rendimiento coincidente en producción sin ver ningún efecto perjudicial en las tasas de fallas.

Más recientemente, integramos la API emergente de WebCodecs, que actualmente está disponible en otra prueba de origen de Chrome. Con esta nueva función, podremos mejorar aún más el rendimiento de la decodificación de video en hardware de baja especificación, como el que se encuentra en muchas Chromebooks populares.

Una vez creada la AWP, es importante fomentar su adopción. Al igual que con muchas apps web, nos enfocamos en la facilidad de acceso, lo que incluye elementos como los accesos con redes sociales, incluido Google, que llevan al usuario rápidamente a un lugar donde puede editar el video y, luego, exportarlo con facilidad. Además, promocionamos nuestros mensajes de instalación de AWP en la barra de herramientas y como un aviso emergente en la navegación del menú.

Resultados

Nuestra AWP instalable de Chrome ha tenido un buen rendimiento. Nos complace ver una retención un 9% más alta con los usuarios de la AWP que con nuestros usuarios estándar de computadoras de escritorio. La instalación de la AWP fue masiva y aumentó a un ritmo del 97% por mes desde que la lanzamos hace cinco meses. Además, como se mencionó antes, las mejoras de SIMD de WebAssembly mejoraron el rendimiento 2.3 veces.

Junio de 2020: ~1,000 instalaciones. Julio de 2020: ~5,000 instalaciones. Agosto de 2020: ~12,000 instalaciones. Septiembre de 2020: ~20,000 instalaciones. Octubre de 2020: ~30,000 instalaciones.
Instalaciones de la AWP de Clipchamp en los últimos 6 meses.

Futuro

Nos sorprendió gratamente la participación y adopción de nuestra AWP. Creemos que la retención de usuarios de Clipchamp se benefició porque la AWP está instalada y es más fácil acceder a ella. También observamos que la AWP tiene un mejor rendimiento para el editor, lo que la hace más atractiva y hace que las personas vuelvan.

En el futuro, nos entusiasma la oportunidad que ofrece ChromeOS para que aún más usuarios hagan más con menos complicaciones. En particular, nos entusiasman algunas de las integraciones convenientes con el SO local cuando se trabaja con archivos. Creemos que esto ayudará a acelerar los flujos de trabajo de nuestros editores diarios, que es una de nuestras prioridades más importantes.